<template>
	<view class="container">

		<view class="sea-box padding">
			<text class="block text-h4">文章设置</text>
			<text class="text-block">效果与 uni-title 一致，并未二次封装，通过调整 css 样式实现；</text>
			<text class="text-block">与 html 标签相比，文字只有字号的区别，没有 block 效果；</text>

			<text class="block text-h5">标题h5</text>
			<text class="block text-h4">标题h4</text>
			<text class="block text-h3">标题h3</text>
			<text class="block text-h2">标题h2</text>
			<text class="block text-h1">标题h1</text>
			<text class="block text">文本</text>
		</view>

		<view class="sea-box padding">
			<text class="text-h4">文本样式</text>
			<text class="block text-default">默认文字 (text-default)</text>
			<text class="block text-primary">主要文字 (text-primary)</text>
			<text class="block text-success">成功文字 (text-success)</text>
			<text class="block text-warning">警告文字 (text-warning)</text>
			<text class="block text-danger">危险文字 (text-danger)</text>
			<text class="block text-fatal">致命文字 (text-fatal)</text>
		</view>

		<view class="sea-box padding">
			<text class="text-h4">背景色</text>
			<view class="bg-default">默认背景 (bg-default)</view>
			<view class="bg-primary">主要背景 (bg-primary)</view>
			<view class="bg-success">成功背景 (bg-success)</view>
			<view class="bg-warning">警告背景 (bg-warning)</view>
			<view class="bg-danger">危险背景 (bg-danger)</view>
			<view class="bg-fatal">致命背景 (bg-fatal)</view>
		</view>

		<view class="sea-box padding">
			<text class="text-h4">禁用背景色</text>
			<view class="bg-default disabled">禁用的默认背景 (bg-default disabled)</view>
			<view class="bg-primary disabled">禁用的主要背景 (bg-primary disabled)</view>
			<view class="bg-success disabled">禁用的成功背景 (bg-success disabled)</view>
			<view class="bg-warning disabled">禁用的警告背景 (bg-warning disabled)</view>
			<view class="bg-danger disabled">禁用的危险背景 (bg-danger disabled)</view>
			<view class="bg-fatal disabled">禁用的致命背景 (bg-fatal disabled)</view>
		</view>

		<view class="sea-box padding">
			<text class="text-h4">背景色也可以用在按钮上</text>
			<button class="bg-primary">主要按钮</button>
			<button type="primary">主要按钮</button>
			<button class="bg-success">成功按钮</button>
			<button class="bg-warning">警告按钮</button>
			<button class="bg-danger">危险按钮</button>
		</view>

		<view class="bottom-space"></view>
	</view>
</template>

<script>
</script>

<style>
</style>